<!-- 成为推广方 -->
<template>
	<view class="container d-flex">
		<Navbar title="成为推广方" bgColor="#F5F7FF" />
		
		<text class="descripe mb-10">为构建诚信平台并协助您高效开展业务，请如实填写相关资料，以帮助您尽快开通推广业务。您的个人资料将严格按照国家相关法律法规，旅行保密义务。</text>
		
		<view class="tabs d-flex mb-30">
			<text class="tabs_label bold">我是：</text>
			
			<uv-tabs :list="list" lineHeight="9rpx" lineColor="#6642EA" :current="current" @change="onTabsChange"></uv-tabs>
		</view>
		
		<scroll-view class="ruleForm" :enable-flex="true" :scroll-y="true">
			<view class="msg">
				<view class="share d-flex mb-20">
					<text class="share_label mr-10 bold">推广场景：</text>
					
					<view @tap="activeScenario = 0" :class="[activeScenario === 0 ? 'active' : '', 'share_msg d-flex']">
						<text class="share_msg_title mb-10">民生背调</text>
						<text class="share_msg_describe">
							适用于如婚恋交友、家政服务、租赁服务、HR背调、康养陪护、志愿者服务、安保服务等场景进行个人风险排查
						</text>
					</view>
				</view>
				
				<view class="share d-flex mb-20">
						<text class="share_label mr-10 bold"></text>
						
					<view @tap="activeScenario = 1" :class="[activeScenario === 1 ? 'active' : '', 'share_msg d-flex']">
						<text class="share_msg_title mb-10">金融助贷</text>
						<text class="share_msg_describe">
							适用于无票、无税的小微企业及个体工商户的资质评估和个人信贷资质评估等场景
						</text>
					</view>
				</view>
			</view>
			
			<uv-form :model="ruleForm" :rules="rules" ref="form" :required="true"  label-width="230rpx">
				<uv-form-item label="推广展示昵称" :required="true" prop="nickname" borderBottom>
					<uv-input v-model="ruleForm.nickname" inputAlign="right" placeholder="请输入推广展示昵称" border="none" />
				</uv-form-item>
				
				<uv-form-item v-show="current === 1" label="企业名称" :required="true" prop="username" borderBottom>
					<uv-input v-model="ruleForm.username" inputAlign="right" placeholder="请输入姓名" border="none" />
				</uv-form-item>
				
				<uv-form-item v-show="current === 1" label="所属岗位" :required="true" prop="username" borderBottom>
					<uv-input v-model="ruleForm.username" inputAlign="right" placeholder="请输入姓名" border="none" />
				</uv-form-item>
				
				<uv-form-item label="姓名" :required="true" prop="username" borderBottom>
					<uv-input v-model="ruleForm.username" inputAlign="right" placeholder="请输入姓名" border="none" />
				</uv-form-item>
				
				<uv-form-item label="身份证" :required="true" prop="idcardnumber" borderBottom>
					<uv-input v-model="ruleForm.idcardnumber" inputAlign="right" placeholder="请输入证件号" border="none" />
				</uv-form-item>
				
				<uv-form-item label="微信号" :required="true" prop="wechat" borderBottom>
					<uv-input v-model="ruleForm.wechat" inputAlign="right" placeholder="请输入微信号" border="none" />
				</uv-form-item>
				
				<uv-form-item label="电话" :required="true" prop="mobile" borderBottom>
					<uv-input v-model="ruleForm.mobile" inputAlign="right" placeholder="请输入电话" border="none" />
				</uv-form-item>
				
				<uv-form-item label="邮箱" prop="email" borderBottom>
					<uv-input v-model="ruleForm.email" inputAlign="right" placeholder="请输入邮箱" border="none" />
				</uv-form-item>
				
				<uv-form-item class="upload" label="邮箱" prop="email" borderBottom>
					<template #label>
						<view class="label d-flex">
							<text class="label_title mb-5">对外展示logo</text>
							<text class="label_describe">对外展示将会显示在H5查询页及报告详情页，后续可点击头像进行更改</text>
						</view>
					</template>
					<Upload @value="onLogo" :fileList="ruleForm.storefrontphoto" accept="image" :previewFullVideo="true" />
				</uv-form-item>
				
				<uv-form-item class="upload maxUpload" label="邮箱" prop="email" labelPosition="top" borderBottom>
					<template #label>
						<view class="label d-flex">
							<text class="label_title mb-5">工牌/身份证正面/其他</text>
							<text class="label_describe">工牌、劳动合同、企业微信、自媒体后台账号等证明个人所从事认证</text>
						</view>
					</template>
					<Upload :width="280" :height="120" :fileList="ruleForm.workplacephoto" accept="image" :previewFullVideo="true" @value="onCard" />
				</uv-form-item>
				
				<uv-form-item>
					<Protocol ref="tocol" :list="xyList" />
				</uv-form-item>
				
				<uv-form-item class="upload mt-30">
					<uv-button class="submit" @tap="submit">提交</uv-button>
				</uv-form-item>
			</uv-form>
		</scroll-view>
		
		<uv-safe-bottom></uv-safe-bottom>
	</view>
</template>

<script setup>
import {reactive, ref} from 'vue'
import Navbar from '@/components/Navbar/index.vue'
import Upload from '@/components/Upload/index.vue'
import { onPromoter } from '@/api/user.js'
import { valiteMobile, valiteCard } from '@/utils/format'
import Protocol from '@/components/Protocol/index.vue'

// 选中场景
const activeScenario = ref(0)

// 当前角色索引
const current = ref(0)
const onTabsChange = item => {
	current.value = item.index
}

const xyList = reactive([
	{
		title: '信息技术服务合同'
	}
])

const form = ref(null)
const tocol = ref(null)

const fileList = reactive([])

const list = reactive([
	{
		name: '个人',
	},
	{
		name: '企业员工',
	}
])

const ruleForm = ref({
	nickname: '',  // 昵称
	mobile: '',  // 手机号
	username: '',  // 姓名
	wechat: '',  // 微信号
	idcardnumber: '',  // 证件
	usertype: 1,  // 用户推广类型
	email: '',  // 邮箱，
	storefrontphoto: [],  // 店面照片
	workplacephoto: [],  // 工作照
})

const rules = reactive({
	nickname: [
		{required: true, message: '请输入推广昵称', trigger: ['blur', 'change']}
	],
	mobile: [
		{required: true, message: '请输入手机号', trigger: ['blur', 'change']},
		{
			validator: (rule, value, callback) => {
				return valiteMobile(value)
			},
			message: '手机格式错误，请重新输入',
			trigger: ['blur', 'change']
		}
	],
	wechat: [
		{required: true, message: '请输入微信号', trigger: ['blur', 'change']}
	],
	idcardnumber: [
		{required: true, message: '请输入证件号', trigger: ['blur', 'change']},
		{
			validator: (rule, value, callback) => {
				return valiteCard(value)
			},
			message: '证件格式错误，请重新输入',
			trigger: ['blur', 'change']
		}
	],
	username: [
		{required: true, message: '请输入姓名', trigger: ['blur', 'change']}
	]
})

// 门店图片
const onLogo = e => {
	ruleForm.value.storefrontphoto = e
}

// 工牌/身份证/其它
const onCard = e => {
	ruleForm.value.workplacephoto = e
}

const submit = () => {
	form.value.validate().then(async res => {
		
		const xy = await tocol.value.submit()
		
		if (!xy) return
		
		let formData = {}
		
		for (let i in ruleForm.value) {
			if (i !== 'storefrontphoto' && i !== 'workplacephoto') {
				formData[i] = ruleForm.value[i]
			} else {
				formData[i] = ruleForm.value[i].join(',')
			}
		}
		
		uni.showLoading({
			title: '正在提交中...',
			mask: true
		})
		Promise.try(async () => {
			return onPromoter(formData)
		}).then(res => {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				duration: 5000,
				success: res => {
					uni.navigateTo({
						url: '/pages/UserInfo/index'
					})
				}
			})
		}).catch(err => {
			uni.hideLoading()
		})
	})
}
</script>

<style lang="scss" scoped>
.container {
	padding: 25rpx 35rpx;
	flex-direction: column;
	background-color: #F5F7FF;
	height: auto;
	min-height: 100vh;
	
	.descripe {
		color: #6C7282;
		font: {
			size: 26rpx
		}
	}
	
	.tabs {
		align-items: center;
		
		&_label {
			font: {
				size: 26rpx
			}
		}
	}
	
	.ruleForm {
		padding: 25rpx;
		flex: 1 1 auto;
		height: 1%;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .2);
		box-sizing: border-box;
		
		.share {
			align-items: center;
			
			&_label {
				width: 170rpx;
				font: {
					size: 26rpx
				}
			}
			
			&_msg {
				padding: 20rpx 30rpx;
				flex: 1 1 auto;
				width: 1%;
				border-radius: 13rpx;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: linear-gradient(to bottom, #F1F3FE, #FEF8F8);
				border: 1px solid transparent;
				
				&.active {
					border-color: #6642EA;
				}
				
				&_title {
					font: {
						size: 26rpx
					}
				}
				
				&_describe {
					line-height: 38rpx;
					text-align: center;
					color:#909090;
					font: {
						size: 24rpx
					}
				}
			}
		}
	}
	
	.label {
		width: 420rpx;
		flex-direction: column;
		
		&_describe {
			color:#909090;
			font: {
				size: 20rpx
			}
		}
	}
	
	::v-deep {
		.uv-form-item__body__right__message {
			text-align: right;
		}
		.uv-form-item__body__left__content__required {
			left: 5px;
			
			&~.uv-form-item__body__left__content__label {
				padding-left: 30rpx;
			}
		}
		.uv-form-item__body__left__content__label {
			font: {
				size: 26rpx
			}
		}
		
		.upload {
			display: flex;
			
			&.maxUpload {
				.uv-form-item__body {
					.label {
						margin-bottom: 20rpx;
						width: 100%;
					}
					.uv-form-item__body__right {
						width: 100%;
						
						.uv-upload__wrap {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100%;
							
							.uv-icon__icon {
								font: {
									size: 86rpx !important
								}
							}
						}
					}
				}
			}
			
			.uv-upload__wrap__preview {
				margin: 0;
			}
			
			.uv-form-item__body {
				align-items: center;
			}
			
			.uv-upload__wrap {
				margin-left: auto;
				
				.uv-upload__button {
						margin: 0;
				}
			}
		}
	}
}

.submit {
	width: 460rpx;
	margin: 0 auto;
	::v-deep {
		.uv-button {
			background-color: rgba(102, 66, 234, 1);
			color: #fff;
			border-radius: 40rpx;
		}
	}
}
</style>
